<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <title>月账单</title>
    <link rel="stylesheet" href="../../styles/h5/reset.min.css"/>
    <link rel="stylesheet" href="../../styles/h5/errortankuang.css"/>
    <!--以上为公共css样式-->
    <link rel="stylesheet" href="../../styles/h5/index.css"/>

    <script charset="utf-8" type="text/javascript" src="../../scripts/h5/jquery-1.9.1.min.js"></script>
    <script charset="utf-8" type="text/javascript" src="../../scripts/h5/echarts.min.js"></script>
    <script charset="utf-8" type="text/javascript" src="../../scripts/h5/jquery.modal.js"></script>
    <!--以上为公共js文件-->
</head>
<body>
<!--点击切换门店出现的列表-->
<div class="zz-shop-list">
    <span class="zz-shop-icon"></span>
    <select class="zz-shop" name="" id="zz-shop">
        <!--<option value="">阿里巴巴1</option>-->
        <!--<option value="">阿里巴巴2</option>-->
    </select>
    <span class="zz-down-normal"></span>
</div>
<div class="zz-top"></div>
<div id="myChart" style="height: 3.95rem;">

</div>

<div class="zz-month-list">
    <ul>
        <!--<li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>-->
        <!--<span></span>-->
    </ul>
</div>
<div class="zz-merchant-bill">
    <ul>
        <!--<li>-->
            <!--<p class="zz-year-list">2017年1月</p>-->
            <!--<p class="zz-take-all">-->
                <!--<span class="zz-take-money">结算金额</span>-->
                <!--<span class="zz-take zz-color">￥11.11</span>-->
            <!--</p>-->
        <!--</li>-->
    </ul>
</div>
<input type="button" class="footer zz-look-more" value="查看更多"/>
<div class="footer-bottom"></div>
<div class="zz-mail-icon"></div>
</body>

<script charset="utf-8" type="text/javascript" src="../../scripts/h5/utils.js"></script>
<script charset="utf-8" type="text/javascript" src="../../scripts/h5/index.js"></script>
<script charset="utf-8" type="text/javascript">
    var queryURLParameter = utils.queryURLParameter();
    var storeId = "";
    var merId = "";
    var currentPage = 1;
    var pageSize = 4;
	var $lookMore = $(".zz-look-more");
    var $shop = $("#zz-shop");
    var flag = true;
	var dataList = '';
    var store = '';

    function bindStore() {
        var str = '';
        for (var i = 0; i < store.length; i++) {
            var curData = store[i];
            if (curData.defultStore == 0) {
                str += '<option storeId="' + curData.storeId + '" selected>' + curData.storeShortName + '</option>';
            } else {
                str += '<option storeId="' + curData.storeId + '">' + curData.storeShortName + '</option>';
            }
        }
        $shop.html(str);
        storeId = $shop.find("option:selected").attr("storeId");
        title = $shop.find("option:selected").val();
    }

    //初始化店铺
    $.ajax({
        url: utils.ajaxUrl()+"h5/store/receiver/getStoreByOpenid",
        async: false,
        type: 'get',
        success: function (res) {
        	var res = JSON.parse(res);
        	console.log(res);
            if (res && res.retCode == '0000') {
                store = res["storeList"];
                //console.log(store);
                merId = store[0].merId;
                bindStore();

                if (store && store.length > 0) {
                    bindHTML();
                }
            } else {
                utils.newModalPrompt(res.retMsg);
                $lookMore.attr("disabled", "true").val("没有更多交易了").css("border","none");
            }
        }
    });


    //绑定
    function bindMonthOrder() {
        var str = '';
        for (var i = 0; i < dataList.length; i++) {
            var curData = dataList[i];
            var yearMonth = curData["yearMonth"].slice(0,4)+"年"+curData["yearMonth"].slice(4,6)+"月";
            str += '<li>';
            str += '<p class="zz-year-list">' + yearMonth + '</p>';
            str += '<p class="zz-take-all">';
            str += '<span class="zz-take-money">结算金额</span>';
            str += '<span class="zz-take zz-color">￥' + curData["successAmt"] + '</span>';
            str += '</p>';
            str += '</li>';
        }
        if (flag) {
            $(".zz-merchant-bill ul").html(str);
        } else {
            $(".zz-merchant-bill ul").append(str);
        }
    }

//    bindHTML();
    //ajax 初始化
    function bindHTML() {
        $.ajax({
            url: utils.ajaxUrl()+"h5/billDetail/getMonthBillList",
            data: {
                storeId: storeId,
                currentPage: currentPage,
                pageSize: pageSize
            },
            async: false,
            type: 'get',
            success: function (res) {
            	var res = JSON.parse(res);
        		console.log(res);
                if (res && res.retCode == '1') {
                    if (!res.hasNextData) {
                        $lookMore.attr("disabled", "true").val("没有更多了").css({"border":"none","background":"none"});
                    } else {
                    	$lookMore.removeAttr("disabled").val("查看更多").css({"border":"1px solid #ddd","background":"#f4f4f4"});
                    }
                    dataList = res["resultList"];
                    bindMonthOrder();
                } else {
                    utils.newModalPrompt(res.retMsg);
                    $lookMore.attr("disabled", "true").val("没有更多了").css({"border":"none","background":"none"});
                }
            }
        });
    }

    $(window).resize(function () {
        utils.countRem();
        eChart();
    });
    eChart();
    function eChart() {
        var myChart = echarts.init(document.getElementById('myChart'));
        var option = {
            title: {
                text: '月收入（元）',
                show: true,
                left: 10,
                top: 10,
                textStyle: {
                    color: '#999',
                    fontSize: 12
                }
            },
            backgroundColor: "#fff",
            animation: false,
            xAxis: [
                {
                    type: 'category',
                    show: false,
                    data: [
                        {
                            value: '一月',
                            textStyle: {
                                color: '#ccc',
                                fontSize: 14
                            }
                        },
                        {
                            value: '二月',
                            textStyle: {
                                color: '#ccc',
                                fontSize: 14
                            }
                        },
                        {
                            value: '三月',
                            textStyle: {
                                color: '#ccc',
                                fontSize: 14
                            }
                        },
                        {
                            value: '四月',
                            textStyle: {
                                color: '#ccc',
                                fontSize: 14
                            }
                        },
                    ],
                    boundaryGap: false,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#ccc",
                            type: "solid",
                        }
                    }
                }
            ],
            yAxis: {
                type: 'value',
                show: false
            },
            series: [
                {
                    type: 'line',
                    symbolSize: [8, 8],
                    itemStyle: {
                        normal: {
                            borderColor: "#ff8300",
                            borderWidth: 2,
                            lineStyle: {
                                color: "#ff8300",
                                width: 2,
                                type: "solid"
                            },
                            label: {
                                show: true,
                                formatter: null,
                                textStyle: {
                                    color: "#999",
                                    fontSize: 13
                                },
                            }
                        }
                    },
                    tooltip: {
                        show: true,
                        borderColor: "#ff8300"

                    },
                    data: [],
                }
            ]
        };
        var $merchant_bill = $(".zz-merchant-bill ul li");
        //console.log($merchant_bill.length); 
        for (var i = 0; i < $merchant_bill.length; i++) {
            var val = $($merchant_bill[i]).find(".zz-take").html();
            val = val.substring(1);
            //val = parseFloat(val);
            console.log(val);
            option.series[0].data.push(val);
        }
        // 为echarts对象加载数据
        myChart.setOption(option);
    }
    bindMonth();
    function bindMonth() {
        var str = '';
        var $merchant_bill = $(".zz-merchant-bill ul li");
        for (var i = 0; i < $merchant_bill.length; i++) {
        	var val = '';
        	if($($merchant_bill[i]).find(".zz-year-list").html().slice(5,7)<10){
        		val = $($merchant_bill[i]).find(".zz-year-list").html().slice(6);
        	} else {
        		val = $($merchant_bill[i]).find(".zz-year-list").html().slice(5);
        	}
            str += '<li>';
            str += '<span>' + val + '</span>';
            str += '</li>'
        }
        $(".zz-month-list ul").html(str);
    }


    $(function () {
        $shop.change(function () {
            storeId = $shop.find("option:selected").attr("storeId");
            title = $shop.find("option:selected").val();
            currentPage = 1;
            flag = true;
            bindHTML();
            eChart();
            bindMonth();
        });
    });


    //点击加载更多
    $lookMore.click(function () {
        flag = false;
        console.log(storeId+"  :more");
    	currentPage++;
        bindHTML();
    });
    $(".zz-mail-icon").click(function () {
        window.location.href = "../../html/h5/getMail.html?merId=" + merId;
    })

</script>
</html>